<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"></meta>
<script type="text/javascript" src="/js/vue.js"></script>
<title>Vue.js</title>
</head>
<body>
	<h1>VFOR指令</h1>
	<hr></hr>
	<div id="app">
		<ul>
			<li v-for="item in sortItems">
				{{item}}
			</li>
		</ul>
		<hr></hr>
		<ul>
			<li v-for="student in sortStudents">
				{{student.name}}--------{{student.age}}
			</li>
		</ul>
	</div>
	
	<script type="text/javascript">
		var app = new Vue({
			
			el:'#app',
			data:{
				items:[53,23,68,38,15,98,27,9],
				students:[
					{
						name:'zhangfeng',
						age:26
					},
					{
						name:'张峰',
						age:25
					},
					{
						name:'zf',
						age:23
					}
				]
			},
			computed:{
				sortItems:function(){
					return this.items.sort(sortNUmber);
				},
				sortStudents:function(){
					return sortByKey(this.students,'age');
				}
			}
		});
		
		function sortNUmber(a,b){
			return a-b;
		}
		
		//数组对象排序方法
		function sortByKey(array,key){
			return array.sort(function(a,b){
				var xstudent = a[key];
				var ystudent = b[key];
				return ((ystudent > xstudent)?-1:((xstudent > ystudent)?1:0));
			});
		}
		
	</script>
</body>
</html>